@syncfusion/ej2-lists

Basic ListView

This code demonstrates how to create a basic ListView with a header and a few items.

const listView = new ej.lists.ListView({
  dataSource: ['Item 1', 'Item 2', 'Item 3'],
  headerTitle: 'Basic List',
  showHeader: true
});
listView.appendTo('#listView');

Nested ListView

This code demonstrates how to create a nested ListView, where each item can have its own sub-items.

const nestedList = [
  { text: 'Item 1', id: '1', child: [{ text: 'Sub Item 1.1', id: '1.1' }, { text: 'Sub Item 1.2', id: '1.2' }] },
  { text: 'Item 2', id: '2', child: [{ text: 'Sub Item 2.1', id: '2.1' }, { text: 'Sub Item 2.2', id: '2.2' }] }
];
const listView = new ej.lists.ListView({
  dataSource: nestedList,
  fields: { id: 'id', text: 'text', child: 'child' },
  headerTitle: 'Nested List',
  showHeader: true
});
listView.appendTo('#nestedListView');

Checklist

This code demonstrates how to create a checklist where each item has a checkbox.

const checklist = new ej.lists.ListView({
  dataSource: ['Option 1', 'Option 2', 'Option 3'],
  showCheckBox: true,
  headerTitle: 'Checklist',
  showHeader: true
});
checklist.appendTo('#checklist');

Virtual Scrolling

This code demonstrates how to create a ListView with virtual scrolling enabled, which is useful for handling large datasets efficiently.

const largeData = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);
const listView = new ej.lists.ListView({
  dataSource: largeData,
  enableVirtualization: true,
  height: '400px',
  headerTitle: 'Virtual Scrolling',
  showHeader: true
});
listView.appendTo('#virtualListView');